Form Layout

Give your forms some structure—from inline to horizontal to custom grid implementations.

Forms

Every group of form fields should reside in a <form> element. Astral provides no default styling for the <form> element, but there are some powerful browser features that are provided by default.

• New to browser forms? You may consider reviewing the MDN form docs for an overview and complete list of available attributes.
• <button>s within a <form> default to type="submit", so strive to be specific and always include a type.
• You can disable every form element within a form with the disabled attribute on the <form>.

Form Grid

More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.

More complex layouts can also be created with the grid system.

		
	

	 

	   Email
	   
	
	 

	   Password
	   
	
	 

	   Address
	   
	
	 

	   Address 2
	   
	
	 

	   City
	   
	
	 

	   State
	   
	   Choose...
	   ...
	  
	
	 

	   Zip
	   
	
	 

	   

	   
	   Check me out
	  
	
	 

	   Sign in
	
	
		
	

Horizontal Forms

Create horizontal forms with the grid by adding the .columns class to form groups and using the .col-* classes to specify the width of your labels and form inputs.

	

	  

	    Email
	    

	  
	 
	
	

	   Password
	   

	   
	 
	
	

	  

	   

	     
	     Example checkbox
	  
	
	
	Sign in
	
	

Column Spacing

As shown in the previous examples, our grid system allows you to place any number of .columns within a .columns. They’ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining .columns equally split the rest, with specific column classes like .column.col-7. or .column.col-md-7.

Form inline

AiraCSS also supports inline forms without using flex utilities.Just use the class form-inline.

  

    Email
    
  
 

   Password